<template>
  <div class="auth-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>SSO 单点登录授权</span>
        </div>
      </template>
      <div class="auth-content">
        <div class="app-info">
          <div class="app-logo">
            <!-- 假设 logo 是一个 img 标签 -->
            <img src="http://localhost:8808/upload_file/2024-11-21/d5rokadsl1gcp7w55s.png" alt="App Logo" />
          </div>
          <div class="app-details">
            <p style="margin-bottom: 12px;"><strong>{{ appName }}</strong></p>
            <p>此第三方应用请求获得以下权限：</p>
          </div>
        </div>
        <el-checkbox-group v-model="selectedPermissions">
          <el-checkbox v-for="(item,index) in scopes"
                       :key="item.key"
                       :label="item.value"
                       :value="item.key"
                       :disabled="index===0"
                       checked
                       style="display: block; margin-bottom: 10px;" />
        </el-checkbox-group>
        <div class="button-group">
          <el-button type="primary" @click="handleAuthorize">授权</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
import {ssoAuthorize, ssoGetOauthInfo} from "/@/api/system/sso/server/ssoOauth";
import {baseURL} from "/@/utils/gfast";

interface Scopes {
  key: string;
  value: string;
}

const appName = ref('');
const scopes = ref<Scopes[]>([]);
const selectedPermissions = ref<string[]>([]);
const redirectUri = ref('');
const clientId = ref('');
onMounted(() => {
  const route = useRoute();
  const { client_id, redirect_uri } = route.query;
  clientId.value = client_id as string;
  redirectUri.value = redirect_uri as string;
  ssoGetOauthInfo({ client_id: client_id }).then((res: any) => {
    scopes.value = res.data.data.appInfo.scopes;
    appName.value = res.data.data.appInfo.appName;
  });
});

const handleAuthorize = () => {
  // 处理授权逻辑
   window.location.href = baseURL+"api/v1/sso/server/oauth/authorize?scopes="+selectedPermissions.value+"&redirect_uri="
       +redirectUri.value+"&client_id="+clientId.value
};

const handleCancel = () => {
  // 处理取消逻辑
  window.history.back()
};
</script>

<style scoped lang="scss">
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 120px);
}

.box-card {
  width: 400px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 垂直排列 */
  padding: 20px; /* 增加内边距 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.auth-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左对齐 */
}

.app-info {
  display: flex;
  align-items: center; /* 使内容垂直居中 */
  margin-bottom: 20px;
  width: 100%;
  justify-content: flex-start; /* 左对齐 */
}

.app-logo img {
  width: 50px;
  height: 50px;
  margin-right: 30px; /* 增加右边内容的间隔 */
  border-radius: 50%; /* 圆角效果 */
  object-fit: cover; /* 保持图片比例并裁剪 */
}

.app-details {
  display: flex;
  flex-direction: column;
}

.app-details p {
  margin: 0;
}

.button-group {
  margin-top: 20px;
  text-align: center; /* 按钮居中 */
}
</style>
